<template>
  <div>

    <label>
      <input type="text" class="hw-text" placeholder="input something">
    </label>
    <div>
      <button class="hw-btn">Test</button>
      <button class="hw-btn hw-btn-medium">Test</button>
      <button class="hw-btn hw-btn-large">Test</button>
    </div>

    <div style="width: 200px;margin: auto">
      <v-select
          class="style-chooser"
          placeholder="Choose a Styling Option"
          :options="['Components', 'CSS / Variables', 'Slots']"
      />
    </div>

    <vue-tiny-tabs id="mytabs" :anchor="false" :closable="true" :hideTitle="false" @on-close="onClose" @on-before="onBefore" @on-after="onAfter">
      <div class="section" id="example">
        <h3 class="title">Example code</h3>
        <h3>Javascript</h3>
      </div>
      <div class="section" id="options">
        <h3 class="title">Options table</h3>
        <h3>Options</h3>
      </div>
      <div class="section" id="components">
        <h3 class="title">Components</h3>
        <h3>Options</h3>
      </div>
    </vue-tiny-tabs>



  </div>
</template>

<script>
import {MockDB} from "@/mockdata/data";
import VueTinyTabs from 'vue-tiny-tabs'

export default {
  name: "presetting",
  mounted() {
    for (let model of this.modelList) {
      this.modelChkList.push(model.id)
    }
  },
  data() {
    return {
      modelChkList: [],
      modelList: MockDB.models,
    };
  },
  components: {
    'vue-tiny-tabs': VueTinyTabs
  },
  methods: {
    onClose (id) {
      console.log('Callback function that gets evaluated while closing the tab', id)
    },
    onBefore (id, tab) {
      console.log('Callback function that gets evaluated before a tab is activated', id, tab)
    },
    onAfter (id, tab) {
      console.log('Callback function that gets evaluated after a tab is activated', id, tab)
    }
  },
}


</script>

<style>

</style>